import React from 'react';
import './HerbList.css';

interface HerbListProps {
  herbs: any[];
  onHerbClick: (herbId: string) => void;
}

export const HerbList: React.FC<HerbListProps> = ({ herbs, onHerbClick }) => {
  if (herbs.length === 0) {
    return <div className="herb-list-empty">没有找到匹配的药材</div>;
  }

  return (
    <ul className="herb-list">
      {herbs.map(herb => (
        <li 
          key={herb.id} 
          className="herb-list-item"
          onClick={() => onHerbClick(herb.id)}
        >
          <h3>{herb.name}</h3>
          <span className="category">{herb.category}</span>
          <div className="properties">
            <span className="property">{herb.properties.性}</span>
            {herb.properties.味.length > 0 && (
              <span className="property">{herb.properties.味[0]}</span>
            )}
          </div>
        </li>
      ))}
    </ul>
  );
}; 